import { getDict } from "@/services/api/module/system/dict";
import { ModalForm, ProColumns, ProFormCheckbox, ProFormInstance, ProFormRadio } from "@ant-design/pro-components";
import { Checkbox } from "antd";
import React, { useEffect, useRef, useState } from "react";
export type ExportProps<T> = {
	onCancel: () => void;
	onSubmit: (values: any) => Promise<any>;
	title: string | undefined;
	open: boolean;
	columns: ProColumns<T>[];
};
import { dict } from "@/utils/DictionaryCacheManager";
const ExportModal: React.FC<ExportProps<any>> = props => {
	const formRef = useRef<ProFormInstance>();
	const { onCancel, onSubmit, open, columns, title } = props;
	const [selectAll, setSelectAll] = useState(true);
	const [indeterminate, setIndeterminate] = useState(false);
	const [columnValue, setColumnValue] = useState<any>([]);
	const [columnFormate, setColumnFormate] = useState<any>([]);
	const [exportType, setExportType] = useState<any>([]);

	useEffect(() => {
		if (columns) {
			const cheBoxField: any = [];
			const checkBoxFieldValue: any = [];
			columns.forEach(item => {
				if (!item?.hideInTable && item?.dataIndex !== "option") {
					cheBoxField.push({
						label: item.title,
						value: item.dataIndex
					});
					checkBoxFieldValue.push(item.dataIndex);
				}
			});
			setColumnValue(checkBoxFieldValue);
			setColumnFormate(cheBoxField);
		}
	}, [columns]);

	useEffect(() => {
		dict.getDict("sys_export_type").then(data => {
			setExportType(data);
		});
	}, []);

	useEffect(() => {
		if (open) {
			setTimeout(() => {
				formRef?.current?.setFieldValue("fieldList", columnValue);
			});
		}
	}, [open]);

	const handleCancel = () => {
		onCancel();
		formRef?.current?.resetFields();
		setSelectAll(true);
	};

	// 表单提交
	const handleFinish = async (values: any) => {
		return onSubmit(values);
	};

	return (
		<>
			<ModalForm
				title={title}
				open={open}
				formRef={formRef}
				modalProps={{
					destroyOnClose: true,
					onCancel: () => {
						handleCancel();
					}
				}}
				onFinish={async values => {
					handleFinish(values);
				}}
			>
				<ProFormRadio.Group
					required
					name="exportType"
					label="导出选项"
					radioType="button"
					initialValue={"all"}
					valueEnum={exportType}
				/>
				请选择导出字段
				<br />
				<Checkbox
					checked={selectAll}
					indeterminate={indeterminate}
					onChange={e => {
						setSelectAll(e.target.checked);
						formRef?.current?.setFieldValue("fieldList", e.target.checked ? columnValue : []);
					}}
				>
					全选
				</Checkbox>
				<ProFormCheckbox.Group
					extra="提示:系统将导出列表中选中的数据"
					name="fieldList"
					fieldProps={{
						onChange: values => {
							const formLength = values.length;
							if (formLength === 0) {
								setSelectAll(false); // 全部取消勾选时，取消全选
								setIndeterminate(false);
							} else if (formLength === columnValue.length) {
								setSelectAll(true); // 全部勾选时，设置全选
								setIndeterminate(false);
							} else {
								setIndeterminate(true);
							}
						}
					}}
					options={columnFormate}
				/>
			</ModalForm>
		</>
	);
};

export default ExportModal;
